<template>
  <view class="container">
    <z-paging ref="paging" v-model="dataList" @query="queryList">
      <view class="menu">
        <view class="menu-item" v-for="(item, index) in dataList" :key="index">
          <view class="menu-item-thead">
            <view class="title">
              提现到{{item.extract_type=='alipay'?'支付宝':'微信' }}
            </view>
            <view class="status" :style="{'color':item.status == -1?'#EE1B1B':item.status ==0?'#2DCA19':'#222'}">
              {{item.status == -1?'未通过':item.status == 0?'审核中':'已提现'}}
            </view>
          </view>
          <view class="menu-item-tfoot">
            <view class="time">
              {{item.add_time}}
            </view>
            <view class="value">
              +{{item.extract_price}}
            </view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
  import reqApi from "../../api/api.js";
  export default {
    data() {
      return {
        params: {
          page: 1,
          limit: 10
        },
        dataList: [],
      }
    },
    onShow() {
      this.$nextTick(() => {
        this.$refs.paging.refresh();
      })
    },
    methods: {
      // getList(){
      //   reqApi.tixian(this.params).then(res=>{
      //     console.log("提现列表", res);
      //     this.dataList = res.data.list;
      //   })
      // },
      queryList(pageNo, pageSize) {
        this.params.page = pageNo;
        this.params.limit = pageSize;
        reqApi.tixian(this.params).then(res => {
          console.log("提现列表", res);
          this.$refs.paging.complete(res.data.list);
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    width: 100vw;
    min-height: 100vh;
    background: #fff;

    .menu {
      padding: 0 30rpx;
      box-sizing: border-box;

      .menu-item {
        height: 148rpx;
        align-items: center;
        padding: 30rpx 0;
        box-sizing: border-box;
        border-bottom: 2rpx solid #eee;

        .menu-item-thead {
          display: flex;
          justify-content: space-between;

          .title {
            font-weight: 500;
            font-size: 32rpx;
            color: #000000;
          }

          .status {
            font-weight: 400;
            font-size: 24rpx;
          }
        }

        .menu-item-tfoot {
          display: flex;
          justify-content: space-between;

          .time {
            font-weight: 400;
            font-size: 24rpx;
            color: #000000;
          }

          .value {
            font-weight: 500;
            font-size: 32rpx;
            color: #000000;
          }
        }
      }
    }
  }
</style>